<template>
  <div style="width:100vw ;height: 100vh; position:fixed; top: 0; overflow: hidden">
    <img :src="cover" alt="" style="width: 100vw; z-index: 0">
  </div>
  <navigator-menu></navigator-menu>
  <div class="app-container" style="margin-top: 12vh">
    <div>
      <el-row :gutter="20">
        <el-col :span="6" :xs="24">
          <user-card :user="userMsg"/>
        </el-col>
        <el-col :span="18" :xs="24">
          <el-card style="margin: 2vh;">
            <el-tabs v-model="activeTab">
              <el-tab-pane label="处理学者申诉" name="activity">
                <el-card shadow="hover" header="待处理申诉列表" style="margin: 20px; border-radius: 50px">
                  <el-table
                      :data="scholarcomplainData"
                      border
                      height="350"
                      element-loading-text="Loading"
                      style="width: 95%"
                  >
                    <el-table-column prop="createTime" label="提交日期" width="220">

                    </el-table-column>
                    <el-table-column prop="type" label="类型" width="120">

                    </el-table-column>
                    <el-table-column prop="userId" label="申诉人" width="120">

                    </el-table-column>
                    <el-table-column prop="reason" label="申诉理由" width="350">

                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="120">

                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                      <template #default="scope">
                        <el-button type="text" size="small" @click="dealAppeal(scope.$index, scope.row)">处理</el-button>
                        <!--                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除-->
                        <!--                        </el-button>-->
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-tab-pane>
              <!--              <el-tab-pane label="处理机构认证" name="certificate">
                              <el-card shadow="hover" header="待处理认证列表" style="margin: 20px; border-radius: 50px">
                                <el-table
                                    :data="tableData"
                                    border
                                    element-loading-text="Loading"
                                    style="width: 100%"
                                >
                                  <el-table-column prop="date" label="提交日期" width="220">

                                  </el-table-column>
                                  <el-table-column prop="author" label="申诉对象" width="120">

                                  </el-table-column>
                                  <el-table-column prop="provider" label="申诉人" width="120">

                                  </el-table-column>
                                  <el-table-column prop="description" label="申诉理由" width="200">

                                  </el-table-column>
                                  <el-table-column prop="others" label="备注" width="320">

                                  </el-table-column>
                                  <el-table-column fixed="right" label="操作" width="150">
                                    <template #default>
                                      <el-button type="text" size="small" @click="dialogAppealForm=true">处理</el-button>
                                      <el-button type="danger" size="small" @click="handleDelete(3, 4)">删除
                                      </el-button>
                                    </template>

                                  </el-table-column>
                                </el-table>
                              </el-card>

                            </el-tab-pane>-->
              <el-tab-pane label="处理用户举报" name="timeline1">
                <el-card shadow="hover" header="待处理举报列表" style="margin: 20px; border-radius: 50px">
                  <el-table
                      :data="complainData"
                      border
                      height="350"
                      element-loading-text="Loading"
                      style="width: 95%"
                  >
                    <el-table-column prop="createTime" label="提交日期" width="220">

                    </el-table-column>
                    <el-table-column prop="type" label="类型" width="120">

                    </el-table-column>
                    <el-table-column prop="userId" label="举报人" width="120">

                    </el-table-column>
                    <el-table-column prop="complainedid" label="被举报人" width="120">

                    </el-table-column>
                    <el-table-column prop="reason" label="举报理由" width="350">

                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="120">

                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                      <template #default="scope">
                        <el-button type="text" size="small" @click="dealcomplain(scope.$index, scope.row)">处理
                        </el-button>
                        <!--                        <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除-->
                        <!--                        </el-button>-->
                      </template>

                    </el-table-column>
                  </el-table>
                </el-card>
              </el-tab-pane>
              <!--              <el-tab-pane label="机构人员认证1" name="timeline2">
                              <timeline/>
                            </el-tab-pane>-->
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
  <!--  处理申诉-->
  <el-dialog v-model="dialogAppealForm" title="处理申诉" width="50%">
    <el-descriptions
        class="margin-top"
        title="申诉基本信息"
        :column="3"
        :size="size"
        border
    >
      <template #extra>
        <el-button type="primary" size="small" @click="undoAppeal">打回</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <user/>
          </el-icon>
          申诉人
        </template>
        {{ appealPerson }}
      </el-descriptions-item>
      <!--      <el-descriptions-item>
              <template #label>
                <el-icon>
                  <iphone/>
                </el-icon>
                被申诉人
              </template>
              hjh
            </el-descriptions-item>-->
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <location/>
          </el-icon>
          申诉类型
        </template>
        {{ appealType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <tickets/>
          </el-icon>
          处理状态
        </template>
        <el-tag size="small">{{ appealstatus }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <office-building/>
          </el-icon>
          申诉时间
        </template>
        {{ appealTime }}
      </el-descriptions-item>
    </el-descriptions>
    <h3>申诉具体原因</h3> <br> {{ appealType }}
    <h3>其他理由描述(如截图)</h3>
    <div :style="{'background-image':'url('+appealUrl+')'}" style="width: 20vw; height: 20vw">

    </div>
    <h3>备注</h3>
    无
    <div>
      <h3 style="margin: 3vh 0;">处理回复</h3>
      <el-input type="textarea" placeholder="输入处理回复" style="width: 20vw;" v-model="appealreply"></el-input>
    </div>
    <!--    <el-upload
      class="avatar-uploader"
      action="http"
      list-type="picture-card"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="appealImageUrl" :src="appealImageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
    </el-upload>-->
    <template #footer>
      <span class="dialog-footer" style="margin: 0 auto">
        <el-button type="primary" @click="confirmAppealForm = true"
        >通过</el-button
        >
        <el-button
            @click="
            dialogAppealForm = false;
          "
        >取消</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- 审核确认 -->
  <el-dialog v-model="confirmAppealForm" title="确认申诉" width="30%">
    <span>确认通过该申诉？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button
            type="primary"
            @click="
            confirmAppealForm = false;
            dialogAppealForm = false;
            approveAppeal();
          "
        >确认</el-button
        >
        <el-button @click="confirmAppealForm = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="dialogcomplainForm" title="处理举报" width="50%">
    <el-descriptions
        class="margin-top"
        title="举报基本信息"
        :column="3"
        :size="size"
        border
    >
      <template #extra>
        <el-button type="primary" size="small" @click="undocomplain">打回</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <user/>
          </el-icon>
          举报人
        </template>
        {{ complainPerson }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <iphone/>
          </el-icon>
          被举报人
        </template>
        {{ complainedid }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <location/>
          </el-icon>
          举报类型
        </template>
        {{ complainType }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <tickets/>
          </el-icon>
          处理状态
        </template>
        <el-tag size="small">{{ complainstatus }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <el-icon>
            <office-building/>
          </el-icon>
          举报时间
        </template>
        {{ complainTime }}
      </el-descriptions-item>
    </el-descriptions>
    <h3>举报具体原因</h3>
    <div> {{ complainType }}</div>
    <h3>其他理由描述(如截图)</h3>
    <div :style="{'background-image':'url('+complainUrl+')'}" style="width: 20vw; height: 20vw">

    </div>
    <div>

    </div>
    <br>
    <h3>备注</h3>
    无
    <!--    <el-upload
      class="avatar-uploader"
      action="http"
      list-type="picture-card"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="appealImageUrl" :src="appealImageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
    </el-upload>-->
    <div>
      <h3 style="margin: 3vh 0;">处理回复</h3>
      <el-input type="textarea" placeholder="输入处理回复" style="width: 20vw;" v-model="complainreply"></el-input>
    </div>
    <template #footer>
      <span class="dialog-footer" style="margin: 0 auto">
        <el-button type="primary" @click="confirmcomplainForm = true"
        >通过</el-button
        >
        <el-button
            @click="
            dialogAppealForm = false;
          "
        >取消</el-button
        >
      </span>
    </template>
  </el-dialog>
  <!-- 审核确认 -->
  <el-dialog v-model="confirmcomplainForm" title="确认举报" width="30%">
    <span>确认通过该举报？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button
            type="primary"
            @click="
            confirmAppealForm = false;
            dialogAppealForm = false;
            approvecomplain();
          "
        >确认</el-button
        >
        <el-button @click="confirmcomplainForm = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script>
import {mapGetters} from 'vuex'
import UserCard from './components/UserCard'
import Activity from './components/Activity'
import Timeline from './components/Timeline'
import Account from './components/Account'
import {ElMessage} from "element-plus";
import NavigatorMenu from "../../components/NavigatorMenu";
import axios from "axios";

export default {
  name: 'Manager',
  components: {NavigatorMenu, UserCard, Activity, Timeline, Account},
  data() {
    return {
      user: {},
      cover: require('../../assets/images/apple.jpg'),
      activeTab: 'activity',
      tableData: [
        {
          date: '2016-05-03',
          author: 'Tom',
          provider: 'California',
          description: 'Los Angeles',
          others: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        }, {
          date: '2016-05-03',
          author: 'Tom',
          provider: 'California',
          description: 'Los Angeles',
          others: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        }, {
          date: '2016-05-03',
          author: 'Tom',
          provider: 'California',
          description: 'Los Angeles',
          others: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        }, {
          date: '2016-05-03',
          author: 'Tom',
          provider: 'California',
          description: 'Los Angeles',
          others: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        }, {
          date: '2016-05-03',
          author: 'Tom',
          provider: 'California',
          description: 'Los Angeles',
          others: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        }, {
          date: '2016-05-03',
          author: 'Tom',
          provider: 'California',
          description: 'Los Angeles',
          others: 'No. 189, Grove St, Los Angeles',
          zip: 'CA 90036',
          tag: 'Home',
        },
      ],
      complainData: [],
      scholarcomplainData: [],
      listLoading: true,
      confirmAppealForm: false,
      confirmcomplainForm: false,
      dialogAppealForm: false,
      dialogcomplainForm: false,
      appealMsg: [
        {
          label: "个人资料违规",
          options: [
            {
              value: "头像违规",
              label: "头像违规",
            },
            {
              value: "签名违规",
              label: "签名违规",
            },
          ],
        },
        {
          label: "个人信息不实",
          options: [
            {
              value: "冒名顶替",
              label: "冒名顶替",
            },
            {
              value: "冒领论文",
              label: "冒领论文",
            },
            {
              value: "不属于该机构",
              label: "不属于该机构",
            },
          ],
        },
        {
          label: "个人行为不当",
          options: [
            {
              value: "发表不当言论",
              label: "发表不当言论",
            },
            {
              value: "传播虚假言论",
              label: "传播虚假言论",
            },
            {
              value: "侵犯隐私",
              label: "侵犯隐私",
            },
            {
              value: "引战",
              label: "引战",
            },
            {
              value: "垃圾广告",
              label: "垃圾广告",
            },
          ],
        },
        {
          label: "其他",
          options: [
            {
              value: "其他原因",
              label: "其他原因",
            },
          ],
        },
      ],
      appealId: 0,
      appealType: "个人信息不实 / 冒领论文",
      appealReason: "昨天早上一起床自搜就发现了他人冒领了我的论文",
      appealPerson: '',
      appealstatus: '',
      appealTime: '',
      appealreply: '',
      complainType: "个人信息不实 / 冒领论文",
      complainId: 0,
      complainReason: "昨天早上一起床自搜就发现了他人冒领了我的论文",
      complainPerson: '',
      complainedid: '',
      complainpaper: '',
      complainstatus: '',
      complainreply: '',
      complainUrl: '',
      appealUrl: '',
      complainTime: '',
      complainScholar: {},
      appealImageUrl: "",
      id: 0,
      userMsg: {},
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'name',
  //     'avatar',
  //     'roles'
  //   ])
  // },
  created() {
    this.id = sessionStorage.getItem('id')
    console.log(this.id);
    axios.get('/api/user', {params: {userId: this.id}}) ////获取个人信息
        .then(response => {
          console.log(response);
          console.log("finduser");
          this.userMsg.avatar = response.data.data.avatar;
          this.userMsg.bio = response.data.data.bio;
          this.userMsg.birthday = response.data.data.birthday;
          this.userMsg.gender = response.data.data.gender;
          this.userMsg.id = response.data.data.id;
          this.userMsg.identity = response.data.data.identity;
          this.userMsg.isAdmin = response.data.data.isAdmin;
          this.userMsg.loginDate = response.data.data.loginDate;
          this.userMsg.mail = response.data.data.mail;
          this.userMsg.name = response.data.data.name;
          this.userMsg.pwd = response.data.data.pwd;
          this.userMsg.state = response.data.data.state;
          this.userMsg.codeDate = response.data.data.codeDate;
          this.userMsg.vercode = response.data.data.vercode;
          this.birthdayTmp = this.birthday = response.data.data.birthday;
          this.password = response.data.data.pwd;
          this.username = this.usernameTmp = response.data.data.name;
          this.imageUrl = this.url + response.data.data.avatar;
          this.isBookman = response.data.data.identity == 2;//2表示学者
          this.email = this.emailTmp = response.data.data.mail;
        })
    axios.get('api/scholar/getallusercomplain ').then(
        response => {
          console.log('getallusercomplain')
          console.log(response)
          this.complainData = response.data.data
          for (let i = 0; i < this.complainData.length; i++) {
            if (this.complainData[i].status == 0) {
              this.complainData[i].status = '待处理'
            }
          }
        }
    )
    axios.get('api/scholar/getallauthorcomplain').then(
        response => {
          console.log('scholargetallcomplain')
          console.log(response)
          this.scholarcomplainData = response.data.data
        }
    )
  },
  methods: {
    getUser() {
      this.user = {
        // name: this.name,
        // role: this.roles.join(' | '),
        // email: 'admin@test.com',
        // avatar: this.avatar
      }
    },
    dealAppeal(index, row) {
      this.appealId = row.id
      this.appealPerson = row.userId
      this.appealReason = row.reason
      this.appealstatus = row.status
      this.appealType = row.type
      this.appealTime = row.createTime
      this.appealUrl = "http://124.70.186.113:39245" + row.image

      this.dialogAppealForm = true
    },
    dealcomplain(index, row) {
      this.complainPerson = row.userId
      this.complainId = row.id
      this.complainedid = row.complainedid
      this.complainpaper = row.paperId
      this.complainReason = row.reason
      this.complainstatus = row.status
      this.complainType = row.type
      this.complainTime = row.createTime
      this.complainUrl = "http://124.70.186.113:39245" + row.image
      this.dialogcomplainForm = true
    },
    handleDelete(index, row) {
      this.$confirm('是否确认删除该数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.tableData.splice(index, row)
        console.log('deleted row' + row)
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("Avatar picture must be JPG format!");
      }
      if (!isLt2M) {
        this.$message.error("Avatar picture size can not exceed 2MB!");
      }
      return isJPG && isLt2M;
    },
    approveAppeal() {
      this.complainScholar = {
        id: this.appealId,
        status: 2,
        reply: this.appealreply
      }
      console.log(this.complainScholar)
      axios({
        method: 'post',
        url: '/api/scholar/do-complainscholar/',
        data: this.complainScholar
      }).then(response => {
        console.log(response);
        if (response.data.code == 200) {
          {
            ElMessage({
              showClose: true,
              message: "申诉已通过.",
              type: "success",
            });
          }
        } else {
          console.log(response.data.msg)
          this.$message({
            message: response.data.msg,
            type: 'warning'
          })
        }
      })
    },
    approvecomplain() {
      this.complainScholar = {
        id: this.complainId,
        status: 2,
        reply: this.complainreply
      }
      console.log(this.complainScholar)
      axios({
        method: 'post',
        url: '/api/scholar/do-complainscholar/',
        data: this.complainScholar
      }).then(response => {
        console.log(response);
        if (response.data.code == 200) {
          {
            ElMessage({
              showClose: true,
              message: "举报已通过.",
              type: "success",
            });
          }
        } else {
          console.log(response.data.msg)
          this.$message({
            message: response.data.msg,
            type: 'warning'
          })
        }
      })
    },
    undoAppeal() {
      this.complainScholar = {
        id: this.appealId,
        status: 1,
        reply: this.appealreply
      }
      console.log(this.complainScholar)
      axios({
        method: 'post',
        url: '/api/scholar/do-complainscholar/',
        data: this.complainScholar
      }).then(response => {
        console.log(response);
        if (response.data.code == 200) {
          {
            ElMessage({
              showClose: true,
              message: "申诉已打回.",
              type: "success",
            });
          }
        } else {
          console.log(response.data.msg)
          this.$message({
            message: response.data.msg,
            type: 'warning'
          })
        }
      })
    },
    undocomplain() {
      this.complainScholar = {
        id: this.complainId,
        status: 1,
        reply: this.complainreply
      }
      console.log(this.complainScholar)
      axios({
        method: 'post',
        url: '/api/scholar/do-complainscholar/',
        data: this.complainScholar
      }).then(response => {
        console.log(response);
        if (response.data.code == 200) {
          {
            ElMessage({
              showClose: true,
              message: "举报已打回.",
              type: "success",
            });
          }
        } else {
          console.log(response.data.msg)
          this.$message({
            message: response.data.msg,
            type: 'warning'
          })
        }
      })
    },

  }
}
</script>
<style scoped>

</style>
